<template>
  <div class="grey lighten-5 page-login">
    <v-row no-gutters>
      <v-col cols="7" class="left d-lg-flex primary">
        <div class="d-flex">
          <v-img class="mx-auto mb-10" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-light.png" width="128" />
          <p class="mt-1">Vuetify Console</p>
          <p class="subtitle-1">基于Vuetify的控制台模板</p>
        </div>
      </v-col>
      <v-col cols="5" class="right d-lg-flex grey lighten-5">
        <v-card elevation="2" class="login pt-10 pb-10">
          <v-card-title>
            <h4 class="primary--text">控制台登陆</h4>
          </v-card-title>
          <v-card-text class="pl-5 pr-5 pt-5">
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-text-field v-model="account" label="帐号" suffix="@up1234567.com" required hint="请输入管理员帐号"></v-text-field>
              <v-text-field v-model="password" label="密码" required type="password" hint="请输入管理员密码"></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions class="pl-5 pr-5 pt-5">
            <v-btn large block color="primary" @click="doLogin">登录</v-btn>
          </v-card-actions>
        </v-card>
        <div class="footer">
          <span class="text--secondary font-weight-light text-subtitle-2">
            ©2020-2021 <a class="text-decoration-none" target="_blank" href="https://www.up1234567.com">UP1234567</a> All rights reserved.
          </span>
          <a class="text-decoration-none grey--text text--lighten-1" target="_blank" href="https://gitee.com/sunson468">
            <v-icon dense class="vcicon">vci-gitee</v-icon>
          </a>
        </div>
      </v-col>
    </v-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        valid: false,
        account: '',
        password: '',
      }
    },
    methods: {
      doLogin() {
        this.$vcui.loadon()
        setTimeout(() => {
          this.$vcui.loadoff()
          this.$router.push('/console')
          this.$vcevent.emit('logined')
        }, 3000)
      }
    },
    onLogout() {
      this.router.push('/login')
    }
  }
</script>
<style lang="less" scoped>
  .page-login {
    .left,
    .right {
      height: 100%;
      min-height: 100vh;
    }
    .left,
    .right,
    .left > div,
    .right > div {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .left {
      p {
        font-size: 64px;
        color: #fff;
        text-align: center;
        font-weight: 500;
      }
    }
    .right {
      position: relative;
      h4 {
        width: 100%;
        text-align: center;
      }
      .login {
        width: 360px;
      }
      .footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        text-align: center;
        span {
          line-height: 36px;
          height: 36px;
          vertical-align: middle;
        }
      }
    }
  }
</style>
